<template>
 		<a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
	 		<a-form :layout="formLayout"  :form="form"  @submit="handleSubmit">
			    <a-form-item
			        label="资产名称"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-input  v-decorator="['name',baseform.name]"/>
			    </a-form-item>  
				<a-form-item
			        label="项目类型"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-radio-group name="radioGroup" v-decorator="['type',baseform.type]">
					    <a-radio value="1">定向融资类</a-radio>
					    <a-radio value="2">商票资产类</a-radio>
					    <a-radio value="3">应收账款类</a-radio>
					    <a-radio value="4">其他类</a-radio>
					  </a-radio-group>
			    </a-form-item>
			       <a-form-item
			        label="项目规模（万元）"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-input-number  placeholder="请输入数字"   style='width: 150px'   v-decorator="['prjSize',baseform.prjSize ]"/>
			      </a-form-item>
			      <a-form-item
			        label="融资主体性质"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      > 
			           <a-select  v-decorator="[ 'financingSubjectNature',baseform.financingSubjectNature ]"  placeholder='请选择' >
					      <a-select-option value="1">政信</a-select-option>
					      <a-select-option value="2">地产</a-select-option>
					      <a-select-option value="3" >国企</a-select-option>
					      <a-select-option value="4">其他行业龙头</a-select-option>
					    </a-select>
			      </a-form-item>
			      <a-form-item
			        label="所属集团"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-input placeholder="请输入"  v-decorator="[ 'affiliatedGroup',baseform.affiliatedGroup ]"/>
			      </a-form-item>
			      <a-form-item
			        label="存续周期（月）"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-row :gutter="8">
				        <a-col :span="12">
				          <a-input-number  placeholder="请输入数字"   style='width: 150px' 
				            v-decorator="[
				              'subsistingCycle',baseform.subsistingCycle
				            ]"
				          />
				        </a-col>
				        <a-col :span="12">
				            <!-- <a-select defaultValue="0" style="width: 120px" >
						      <a-select-option value="0">月</a-select-option>
						      <a-select-option value="1">周</a-select-option>
						      <a-select-option value="2" >半年</a-select-option>
						      <a-select-option value="3">年</a-select-option>
						    </a-select> -->
				        </a-col>
				      </a-row>
			      </a-form-item>
			      
			      <a-form-item
			        label="期望募集周期"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			         
			          <a-input placeholder="请输入"   v-decorator="['expectRecruitmentCycle',baseform.expectRecruitmentCycle ]"  />
			      </a-form-item>
			      <a-form-item
			        label="募集路径"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			          <a-radio-group name="radioGroup" v-decorator="['collectionAmtType',baseform.collectionAmtType]">
					    <a-radio value="1">场内</a-radio>
					    <a-radio value="2">场外</a-radio> 
					  </a-radio-group> 
			      </a-form-item>
			      <a-form-item
			        label="发行方"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-input placeholder="请输入"  v-decorator="[ 'issuer',baseform.issuer ]"/>
			      </a-form-item>
			      <a-form-item
			        label="增信方"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-input placeholder="请输入"  v-decorator="[ 'increasingCredit',baseform.increasingCredit ]"/>
			      </a-form-item> 
			      <a-form-item
			        label="期望募集开始日期"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-date-picker  v-decorator="['expectStartDate',baseform.expectStartDate ]"  />
			      </a-form-item>
			      <a-form-item
			        label="资产发行结构图"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      > 
			            <fileUpload  :fileList='releaseFile'  v-on:uploading='($event)=>{releaseFile = $event.fileList}'  v-on:removeFile='removeFile($event,1)'  uptip='仅支持上传一个文件'  :onefile='true' ></fileUpload>
			      </a-form-item>
			      <a-form-item
			        label="可见用户组"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-checkbox-group :options="plainOptions" v-decorator="[ 'roleList',baseform.roleList ]"     />
			      </a-form-item>

				<a-form-item
					label="相关资料"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"
				> 
					<fileUpload   :fileList='RelatedFileList'  v-on:uploading='($event)=>{RelatedFileList = $event.fileList}'  v-on:removeFile='removeFile($event,2)'></fileUpload>
				</a-form-item>


				<a-form-item  v-if='isEdit'  style='display: none;'>
					 <a-input    v-decorator="[ 'code']"/>
				</a-form-item>
				<a-form-item
					:wrapper-col="buttonItemLayout.wrapperCol"
				>
					<a-button type="primary"  html-type="submit"  class='mr20'>
						提交
					</a-button> 
					<a-button @click='cancel_to_back'> 取消 </a-button> 
				</a-form-item>
	    	</a-form>
	 	</a-spin>
</template>

<script>
import  fileUpload  from  '@/components/common/fileUpload'

import { RoleList }  from  '@/api/system/index'
import { detailProperty,submitProperty, }  from  '@/api/property/index'

import moment  from 'moment'
export default {
  name: 'propertyAdd',
  data () {
    return {
    	spinning:false,
    	indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
    	delayTime:500,
    	/*form  布局*/
      	formLayout:'horizontal',
      	plainOptions:[],/*角色列表 多选框*/
      	isEdit:false,
      	/*form-rule*/
	    baseform:{
	    	code:{initialValue:''},

      		name: {rules: [{ required: true, message: '请输入项目名称' },{ whitespace : true ,message:'当前输入不能为空'}]},
      		prjSize: {rules: [{ required: true, message: '请输入' },]},
      		subsistingCycle: {rules: [{ required: true, message: '请输入' }]},
      		affiliatedGroup: {rules: [{ required: true, message: '请输入' },{ whitespace : true ,message:'当前输入不能为空'}]},
      		type:{rules: [{ required: true, message: '请选择项目类型' }],initialValue:''},
      		financingSubjectNature:{initialValue:'',rules: [{ required: true, message: '请选择' }]},
      		issuer:{initialValue:'',rules: [{ required: true, message: '请输入' }]}, 

      		expectStartDate:{initialValue:null},   
      		
      		roleList:{initialValue:[]},
      	}, 
	    releaseFile:[],//结构图
	    RelatedFileList:[],//产品相关附件

	    currentCode:'',
   
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  created(){
  		this.baseform.type.initialValue = this.$route.hash.slice(1)
  		if(this.$route.query.code){
        	this.isEdit = true 
        	this.currentCode = this.$route.query.code 
        }
  		this.pageInit()/*页面 多选框列表初始化*/
  },
  methods:{
  	pageInit(){
  		let that = this
  		this.spinning = true
  		function role(){
  			return  new Promise((resolve,reject)=>{
  				RoleList({pageSize:100}).then((res)=>{
  					if(res.data.flag == true){
		                resolve(res.data.dataList)
		            }
		            else{
		                reject()
		            } 
  				})
  			})
  		}
  		function detail(){
  			return new Promise((resolve,reject)=>{
  				detailProperty(that.currentCode).then((res)=>{
  					if(res.data.flag == true){
		                resolve(res.data.data)
		            }
		            else{
		                reject()
		            } 
  				})
  			})
  		}
  		role().then((list)=>{
  			that.plainOptions = list.map((item)=>{
  				return {
  					label:item.name,
  					value:item.code,
  				}
  			})
  			if(that.isEdit == true){
  				return  detail()
  			}
  		}).then((data)=>{ 
  			// console.log(data)
  			//获取编辑详情
  			if(that.isEdit == true){
  				this.form.setFieldsValue({
  						code:that.currentCode, 

  						name:data.name,
  						type:data.type,
  						affiliatedGroup:data.affiliatedGroup, 
  						expectRecruitmentCycle:data.expectRecruitmentCycle,
  						collectionAmtType:data.collectionAmtType, 

  						expectStartDate:data.expectStartDate ? moment(data.expectStartDate) : null,/*moment 设置为空时，需要设为null  "" & {} 均会warning*/
  						prjSize:data.prjSize,
  						subsistingCycle:data.subsistingCycle,
  			
  						issuer:data.issuer,
  						increasingCredit:data.increasingCredit, 
  						financingSubjectNature:data.financingSubjectNature,

  				})
  				/*可见客户组回填*/ 
  				this.form.setFieldsValue({roleList:this.Recontent_fromcode(data.roleList)}) 
  				//结构图文件
  				this.releaseFile = this.FormEditFile(data.imageList)
  				this.RelatedFileList = this.FormEditFile(data.fileVOList) 
  			}
  			this.spinning = false
  		}).catch((error)=>{
  			this.spinning = false
  		})
  	},  
  	
  	/*页面功能函数*/
  	/*提交表单*/
	handleSubmit (e) {
		let that = this,url
		e.preventDefault();
		// console.log(this.form.getFieldsValue())
		this.form.validateFields((err, values) => {
			if (!err) {
			  // console.log('Received values of form: ', values); 
			  /*角色上传格式处理 [{code:''}] 必须设置initialValue=[]*/ 
			  values.roleList = this.RequireCodeToSub(values.roleList)  
			  /*上传文件格式处理 [{code:''}]*/ 
			  values.imageList = this.ReFileCodeToSub( this.releaseFile)
			  values.fileVOList = this.ReFileCodeToSub( this.RelatedFileList) 
			  /*编辑或新增 上传路径配置*/
			  if(that.isEdit == true){
			  	url = '/op/assets/modify_assets'    //修改 资产
			  }
			  else{
			  	url='/op/assets/create_assets'      //新增 资产
			  }

			  submitProperty(url,values).then((res)=>{
			  	if(res.data.flag == true){
			  		that.$message.success(res.data.msg)
			  		that.$router.push('/property#'+values.type)
			  	}
			  })
			}
			else{
				console.log(err)
			}
		});
	},
	cancel_to_back(){
		let num = this.form.getFieldValue('type')
		this.$router.push('/property#'+num)
	},

	/*组件函数*/  
 	/*移除文件*/
    removeFile(e,num){ 
		if(num==1){
			    this.removeFile_fromList(e,this.releaseFile) 
		}
		if(num == 2){
				this.removeFile_fromList(e,this.RelatedFileList)  
		} 
    },
  },
	computed: {
		formItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
			wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
			} : {};
		},
		buttonItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			wrapperCol: { span: 14, offset: 7 },
			} : {};
		},
		
	},
  components: {
    fileUpload
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*.ant-input{width: 200px;}*/
</style>
